<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">{{> menu-logo }}</a>
      <button class="navbar-toggler" type="button" data-{{data.themeSettings.bootstrapToggleMiddle}}toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">

          {{#each data.menu}}
          <li class="nav-item {{#if this.showChildren}}dropdown{{/if}}">
            <a class="nav-link {{#if this.isActive}}active{{/if}} {{#if this.showChildren}}dropdown-toggle{{/if}}" href="{{this.data.url}}"
              {{#if this.showChildren}}data-{{data.themeSettings.bootstrapToggleMiddle}}toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{/if}}>
              {{this.data.title}}
              <span class="sr-only">(current)</span></a>
    
            {{#if this.showChildren}}
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              {{#each this.children}}
              <a class="dropdown-item" href="{{this.data.url}}">{{this.data.title}}</a>
              {{/each}}
            </div>
            {{/if}}
          </li>
          {{/each}}

        </ul>
        <!-- <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form> -->
      </div>
    </div>
  </nav>